<template>
  <div class="mod-prod-brand">


    <div class="content">
      <div class="info">
        <div class="infoTitle">
          用户基本信息
        </div>
        <div class="itemBox">
          <div class="infoItem">
            <div class="itemTitle">
              用户名
            </div>
            <div class="itemInput">
              <el-input type="text" v-model="registerInfo.userName" placeholder="请输入用户名" />
            </div>
          </div>
          <div class="infoItem">
            <div class="itemTitle">
              真实姓名
            </div>
            <div class="itemInput">
              <el-input type="text" v-model="registerInfo.realName" placeholder="请输入真实姓名" />
            </div>
          </div>
        </div>

        <div class="heng"></div>
        <div class="itemBox">
          <div class="infoItem">
            <div class="itemTitle">
              密码
            </div>
            <div class="itemInput">
              <el-input type="text" v-model="registerInfo.password" placeholder="请输入密码" />
            </div>
          </div>
          <div class="heng"></div>
          <div class="infoItem">
            <div class="itemTitle">
              确认密码
            </div>
            <div class="itemInput">
              <el-input type="text" v-model="affirmPassword" placeholder="请输入确认密码" />
            </div>
          </div>
        </div>

        <!-- <div class="heng"></div>
				<div class="infoItem">
					<div class="itemTitle">
						真实姓名/单位名称
					</div>
					<div class="itemInput">
						<input type="text" placeholder="请输入真实姓名/单位名称" />
					</div>
				</div> -->
        <div class="heng"></div>
        <div class="itemBox">
          <div class="infoItem">
            <div class="itemTitle">
              手机号
            </div>
            <div class="itemInput">
              <el-input type="number" maxlength="11" v-model="registerInfo.cellPhone" placeholder="请输入手机号" />
            </div>
          </div>
          <div class="infoItem">
            <div class="itemTitle">
              联系地址
            </div>
            <div class="itemInput">
              <el-input type="text" v-model="registerInfo.address" placeholder="请输入联系地址" />
            </div>
          </div>
        </div>

        <div class="heng"></div>
        <div class="itemBox">
          <div class="infoItem">
            <div class="itemTitle">
              邮编
            </div>
            <div class="itemInput">
              <el-input type="number" maxlength="6" v-model="registerInfo.postCode" placeholder="请输入邮编" />
            </div>
          </div>
          <div class="infoItem">
            <div class="itemTitle">
              邮箱
            </div>
            <div class="itemInput">
              <el-input type="text" v-model="registerInfo.email" placeholder="请输入邮箱地址" />
            </div>
          </div>
        </div>

        <div class="heng"></div>
        <div class="infoItem">
          <div class="itemTitle">
            用户来源地
          </div>
          <div class="itemInput">
            <div class="inputBox">
              <el-select v-model="registerInfo.provinceName" clearable placeholder="请选择省份" @focus="selectProvince(1)"
                @change="select">
                <el-option v-for="item in columns" :key="item.provinceId" :label="item.provinceName" :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="inputBox">
              <el-select v-model="registerInfo.cityName" clearable placeholder="请选择城市" @focus="selectProvince(2)"
                @change="select">
                <el-option v-for="item in columns" :key="item.provinceId" :label="item.cityName" :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="heng"></div>
        <div class="infoItem">
          <div class="itemTitle">
            选择用户所属行业
          </div>
          <div class="itemInput">
            <div class="inputBox" @click="selectProvince(3)">
              <el-select v-model="registerInfo.industryName" clearable placeholder="请选择用户所属行业"
                @focus="selectProvince(3)" @change="select">
                <el-option v-for="item in columns" :key="item.provinceId" :label="item.industryName" :value="item">
                </el-option>
              </el-select>
              <el-select v-if="this.isTwo" v-model="registerInfo.secIndustryName" clearable placeholder="请选择所属行业二级行业"
                @focus="selectProvince(4)" @change="select">
                <el-option v-for="item in columns" :key="item.secIndustryId" :label="item.secIndustryName"
                  :value="item">
                </el-option>
              </el-select>
              <!-- <input type="text" disabled v-model="industryName" placeholder="请选择用户所属行业" /> -->
              <!-- <input type="text" v-if="secIndustryName" disabled v-model="secIndustryName" placeholder="请选择所属行业二级行业" /> -->
            </div>

          </div>
        </div>
        <div class="heng"></div>
        <div class="itemBox">
          <div class="infoItem">
            <div class="itemTitle">
              用户类型
            </div>
            <div class="itemInput">
              <div class="inputBox">
                <el-select v-model="registerInfo.typeName" clearable placeholder="请选择用户类型" @focus="selectProvince(5)"
                  @change="select">
                  <el-option v-for="item in columns" :key="item.userTypeId" :label="item.typeName" :value="item">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="infoItem">
            <div class="itemTitle">
              证件类型
            </div>
            <div class="itemInput">
              <div class="inputBox">
                <el-select v-model="registerInfo.cardTypeName" clearable placeholder="请选择证件类型"
                  @focus="selectProvince(6)" @change="select">
                  <el-option v-for="item in columns" :key="item.cardTypeId" :label="item.typeName" :value="item">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="heng"></div>
        <div class="infoItem">
          <div class="itemTitle">
            证件号
          </div>
          <div class="itemInput">
            <el-input type="idcard" v-model="registerInfo.cardNum" placeholder="请输入证件号" />
          </div>
        </div>
        <div class="heng"></div>
        <div class="itemBox">
          <div class="infoItem">
            <div class="itemTitle">
              证件有效期
            </div>
            <div class="itemInput">
              <div class="inputBox">
                <!-- <input type="text" v-model="registerInfo.cardStartDate" disabled placeholder="开始日期" /> -->
                <el-date-picker v-model="registerInfo.cardStartDate" type="date" placeholder="开始日期">
                </el-date-picker>
              </div>

              <span v-if="!registerInfo.forever" style="font-size:20px;line-height: 40px;margin-right: 20px;">至</span>
              <div v-if="!registerInfo.forever" class="inputBox">
                <!-- <input type="text" v-model="registerInfo.cardEndDate" disabled placeholder="结束日期" /> -->
                <el-date-picker v-model="registerInfo.cardEndDate" type="date" placeholder="结束日期">
                </el-date-picker>
              </div>

            </div>
          </div>
          <div class="infoItem">
            <div class="itemTitle">
              证件是否永久有效
            </div>
            <div class="itemInput">
              <el-switch v-model="registerInfo.forever" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>

            </div>
          </div>
        </div>


        <div class="heng"></div>
        <div class="infoItems">
          <div class="itemTitle">
            证件上传
          </div>
          <div class="itemInputs">
            <div class="itemBox" style="width: 100%; display: flex; justify-content: flex-start;">
              <div style="margin-right: 20px;">
                <span>证件正面</span>
                <imgs-upload v-model="registerInfo.filePath1" :limit="1" :size="'600*300'" />
              </div>
              <div>
              <span>证件反面</span>
                <imgs-upload v-model="registerInfo.filePath2" :limit="1" :size="'600*300'" />
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="btnBox">
      <div v-if="!isAmend" class="btn" @click="clickBtn">
        注册用户
      </div>
      <div v-else class="btn" @click="clickBtn">
        确认修改
      </div>
    </div>
  </div>
</template>

<script>
import AddOrUpdate from './brand-add-or-update'
import ImgsUpload from '@/components/img-upload'
import { Message } from 'element-ui'
import { isMobile, validNoEmptySpace, isUserName } from '@/utils/validate'
export default {
  data() {
    return {
      addOrUpdateVisible: true,
      showDate: false,
      columns: [],
      registerInfo: {
        userName: '', //用户名
        realName: '',
        password: '', //密码
        cardStartDate: '', //证件开始日期
        cardEndDate: '', //证件结束日期
        address: '', //联系地址
        postCode: '', //邮政编码
        email: '', //邮箱
        industryId: '', //一级行业
        industryName: '',
        secIndustryId: '', //二级行业
        secIndustryName: '',
        provinceId: '', //省份ID
        provinceName: '', //省份名称
        cityId: '', //城市Id
        cityName: '', //城市名称
        userTypeId: '', //用户类型
        typeName: '',
        cardTypeId: '', //证件类型
        cardTypeName: '', //证件类型名称
        filePath1: '', //身份证正面
        filePath2: '', //身份证反面
        cardNum: '',
        cellPhone: '', //手机号
        forever: false //证件是否永久有效
      },
      affirmPassword: '',
      selectType: 1,
      isTwo: false,
      isAmend: false
    }
  },
  components: {
    /* AddOrUpdate */
    ImgsUpload,

    AddOrUpdate
  },
  mounted() {
  },
  methods: {
    timestampToTimes(date) {
      let dates = new Date(date);
      let Y = dates.getFullYear();
      let M = (dates.getMonth() + 1 < 10 ? '0' + (dates.getMonth() + 1) : dates.getMonth() + 1);
      let D = dates.getDate() < 10 ? '0' + dates.getDate() : dates.getDate();
      let timeJson = Y + '-' + M + '-' + D

      return timeJson;
    },
    clickBtn() {
      this.registerInfo.cardStartDate = this.timestampToTimes(this.registerInfo.cardStartDate)
      this.registerInfo.cardEndDate = this.timestampToTimes(this.registerInfo.cardEndDate)
      this.registerInfo.filePath1 = 'https://whdsjminio.gscaee.com/mall4j/'+this.registerInfo.filePath1
      this.registerInfo.filePath2 = 'https://whdsjminio.gscaee.com/mall4j/'+this.registerInfo.filePath2
      if (!isUserName(this.registerInfo.userName)) {
        Message({
          message: "用户名格式不正确,支持6-18位数字、字母",
          type: 'error',
          duration: 1.5 * 1000
        })
        return

      }
      if (!this.registerInfo.password) {
        Message({
          message: "密码不能为空",
          type: 'error',
          duration: 1.5 * 1000
        })
        return

      }
      if (!this.registerInfo.realName) {
        Message({
          message: "真实姓名不能为空",
          type: 'error',
          duration: 1.5 * 1000
        })
        return

      }
      if (this.registerInfo.password != this.affirmPassword) {
        Message({
          message: "密码与确认密码不一致",
          type: 'error',
          duration: 1.5 * 1000
        })
        return

      }
      if (!isMobile(this.registerInfo.cellPhone)) {
        Message({
          message: "手机号格式不正确",
          type: 'error',
          duration: 1.5 * 1000
        })
        return

      }
      if (!this.registerInfo.address) {
        Message({
          message: "联系地址不能为空",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.postCode) {
        Message({
          message: "邮政编码不能为空",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (this.registerInfo.postCode.length != 6) {
        Message({
          message: "邮政编码格式不正确",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.email) {
        Message({
          message: "邮箱不能为空",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.provinceName) {
        Message({
          message: "请选择省份",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.cityName) {
        Message({
          message: "请选择城市",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.industryId) {
        Message({
          message: "请选择一级行业",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (this.isTwo && !this.registerInfo.secIndustryId) {
        Message({
          message: "请选择二级行业",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.typeName) {
        Message({
          message: "请选择用户类型",
          type: 'error',
          duration: 1.5 * 1000
        })
        return

      }
      if (!this.registerInfo.cardTypeId) {
        Message({
          message: "请选择证件类型",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.cardNum) {
        Message({
          message: "证件号码不能为空",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (this.registerInfo.cardNum.length != 18) {
        Message({
          message: "证件号码格式不正确",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.cardStartDate) {
        Message({
          message: "请选择证件开始有效期",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.forever && !this.registerInfo.cardEndDate) {
        Message({
          message: "请选择证件结束有效期",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.filePath1) {
        Message({
          message: "请上传证件正面",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }
      if (!this.registerInfo.filePath2 && this.registerInfo.typeName == '自然人') {
        Message({
          message: "请上传证件反面",
          type: 'error',
          duration: 1.5 * 1000
        })
        return
      }

      if (this.isAmend) {
        updateUser(this.registerInfo).then(res => {
          _showToast("修改成功，请去提交版权申请")
          setTimeout(() => {
            uni.navigateBack()
          }, 1200)
        })
      } else {
        this.$http({
          url: this.$http.adornUrl('/plat/gwjCopyright/registerUser'),
          method: 'post',
          data: this.$http.adornData(this.registerInfo)
        }).then(({ data }) => {
          this.$message({
            message: "用户注册成功，请等待审核",
            type: 'success',
            duration: 1500,
            onClose: () => {

            }
          })
        }).catch(() => {

        })

      }

    },

    selectProvince(index) {
      this.selectType = index
      this.columns = []
      if (index == 1) {
        this.$http({
          url: this.$http.adornUrl('/plat/gwjCopyright/getProvinceList'),
          method: 'get',
        }).then(({ data }) => {
          this.columns = data
        })
      } else if (index == 2) {
        if (!this.registerInfo.provinceId) {
          Message({
            message: "您还没有选择省份",
            type: 'error',
            duration: 1.5 * 1000
          })
          return
        }
        this.$http({
          url: this.$http.adornUrl(`/plat/gwjCopyright/getCityList?provinceId=${this.registerInfo.provinceId}`),
          method: 'get',
        }).then(({ data }) => {
          this.columns = data
        })
      } else if (index == 3) {
        this.$http({
          url: this.$http.adornUrl('/plat/gwjCopyright/getIndustryList'),
          method: 'get',
        }).then(({ data }) => {
          this.columns = data
        })
      } else if (index == 4) {
        console.log(this.columns)
        this.$http({
          url: this.$http.adornUrl(`/plat/gwjCopyright/getSecIndustryList?industryId=${this.registerInfo.industryId}`),
          method: 'get',
        }).then(({ data }) => {
          this.isTwo = true
          this.columns = data
        })
      } else if (index == 5) {
        console.log(this.columns)
        this.$http({
          url: this.$http.adornUrl(`/plat/gwjCopyright/getDictByType?type=userType`),
          method: 'get',
        }).then(({ data }) => {
          this.columns = data
        })
      } else if (index == 6) {
        console.log(this.columns)
        this.$http({
          url: this.$http.adornUrl(`/plat/gwjCopyright/getDictByType?type=cardType`),
          method: 'get',
        }).then(({ data }) => {
          this.columns = data
        })
      }

    },
    select(e) {
      console.log(e)
      if (this.selectType == 1) {
        this.registerInfo.provinceName = e.provinceName
        this.registerInfo.provinceId = e.provinceId
        this.show = false
      } else if (this.selectType == 2) {
        this.registerInfo.cityName = e.cityName
        this.registerInfo.cityId = e.cityId
        this.show = false
      } else if (this.selectType == 3) {
        this.registerInfo.industryId = e.industryId
        this.registerInfo.industryName = e.industryName
        // this.selectType = 4
        this.$http({
          url: this.$http.adornUrl(`/plat/gwjCopyright/getSecIndustryList?industryId=${this.registerInfo.industryId}`),
          method: 'get',
        }).then(({ data }) => {
          console.log(data)
          if (data.length == 0) {
            this.isTwo = false
            this.registerInfo.secIndustryId = ''
            this.registerInfo.secIndustryName = ''
            return;
          }
          this.isTwo = true
          this.columns = []
          this.columns = data
        })
      } else if (this.selectType == 4) {
        this.registerInfo.secIndustryId = e.secIndustryId
        this.registerInfo.secIndustryName = e.secIndustryName
      } else if (this.selectType == 5) {
        this.registerInfo.userTypeId = e.typeId
        this.registerInfo.typeName = e.typeName
      } else if (this.selectType == 6) {
        this.registerInfo.cardTypeId = e.typeId
        this.registerInfo.cardTypeName = e.typeName
      }
    },








  }
}
</script>
<style scoped>
.content {
  padding: 28px 20px 20px;
}

.info {
  /* background-color: #FFEEB8; */
  padding: 28px 28px 0;
  border-radius: 20px;
}

.itemBox {
  display: flex;
}

.infoTitle {
  font-size: 36px;
  line-height: 48px;
  font-weight: bold;

}

.infoItem {
  display: flex;
  align-items: center;
  padding: 15px 0;
  margin-right: 20px;
}

.itemTitle {
  font-size: 20px;
  line-height: 40px;
  color: #141622;
  margin-right: 20px;
}

.itemInput {
  /* flex: 1; */
  text-align: end;
  display: flex;
  justify-content: flex-end;
  margin-left: 20px;
}

.inputBox {
  margin-right: 20px;
}

.inputBox input {
  pointer-events: none;
}

.heng {
  height: 2px;
  background-color: #141622;
  opacity: .1;
}

.shenfenzheng {
  background-color: #fff;
  border-radius: 20px;
  padding: 28px;
  margin-top: 42px;
}

.titleExplain {
  font-size: 24px;
  line-height: 32px;
  opacity: .5;
  margin-top: 8px;
  padding-bottom: 16px;
}

.zuopin {
  width: 276px;
  height: 276px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #141622;
  margin: 58px auto 70px;
}

.zuopin image {
  width: 100%;
  height: 100%;
}


.infoItems {
  padding: 32px 0;
}

.itemInputs {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.itemInputs textarea {
  width: 100%;
}


.btnBox {
  width: 100%;
  height: 96px;
  display: flex;
  justify-content: center;
}

.btn {
  width: 194px;
  height: 64px;
  border-radius: 12px;
  background-color: #40AD73;
  margin-top: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 64px;
  text-align: center;
}


.maskPage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
}
</style>
